import { Draw } from "../../../Draw/Draw";
import { IKonva } from "../../../Interface/IKonva";
import { richTextTemp } from "../../../Template/DialogTemp";

export function groupRichTextDbClick(e: IKonva.Event, draw: Draw) {
  e.cancelBubble = true;
  const richText = e.target;
  //  1. 拿到数据源
  const { delta } = richText.attrs;

  const layer = draw.getLayer();
  if (!layer) return;

  //   2. 打开弹窗
  const dialog = draw.getDialog();
  const konvaGraph = draw.getKonvaGraph();

  dialog.open({
    delta,
    title: "富文本编辑",
    content: richTextTemp,
    onConfirm: async ({ source, delta }) => {
      // 拿到当前的属性，删除后重新添加
      const newRichText = await konvaGraph.RichText({
        ...e.currentTarget.attrs, // 要拿到 group 的属性，因为 width height x y scaleX scaleY ... 都在 group 上
        source,
        delta,
      });

      // 删除旧图层
      e.currentTarget.destroy();

      // 更新图片资源
      konvaGraph.addShape({ shape: newRichText });
    },
  });
}
